<template>
	<div class="view-stage-list" ref="container">
		<!-- <van-sticky :container="container"> -->
		<div class="list-tab flex-wrap flex-text-mid">
			<div class="tab-item" v-for="(item , i) in list" :key="i" :class="{active: activeIndex === i}"
				@click="startMove(i)">
				<span>第{{ i + 1 }}阶段</span>
			</div>
		</div>
		<!-- </van-sticky> -->
		<scroll-view class="scroll-view" scroll-y="true" :scroll-into-view="currentView">
			<div class="view-stage-list" :id="'stage-' + i" v-for="(item , i) in list" :key="i">
				<div class="stage-title">
					<div class="content-top">
						<div class="flex-wrap space-between flex-text-mid">
							<span>第{{ i + 1 }}阶段 {{ item.name }}</span>
							<van-icon name="play" color="#bbbbbb" size="10" class="arrow"
								:class="[item.show ? 'arrow-top' : '']" v-if="item.brief" @click="changeBrief(item)" />
						</div>
						<!--          <transition name="van-fade">-->
						<div class="stage-title-desc" v-show="item.show">{{ item.brief }}</div>
						<!--          </transition>-->

					</div>
				</div>
				<div class="stage-item flex-wrap flex-text-mid"
					:class="{ 'locked': job.lockFlag != '2', 'higher': ['SI', 'SI_OFFLINE'].includes(job.courseType),}"
					v-for="(job, index) in item.jobs" :key="index">
					<em v-if="job.lockFlag !== '2'" class="locked mr5"> <i class="icon-lock"></i> </em>
					<template v-else>
						<em class="lesson-status mr5" v-if="job.signInStatus"
							:class="signInInfo(job.signInStatus, index,  item.jobs)"> </em>
						<em class="lesson-status mr5" v-else :class="jobInfo(job, index,  item.jobs)"> </em>
					</template>

					<div class="stage-item-left fs-16 fcolor-333">{{ index + 1 }}.</div>

					<div class="flex-wrap flex-text-mid" style="width: 86%">

						<div class="stage-content flex-item">
							<div class="stage-name ellipsis">
								<image class="stage-icon" :src="imgList[job.courseType]" />
								【{{ dealExamTypeName(job.courseType) }}】{{ job.name }}
							</div>
							<div class="stage-time fs-12 fcolor-999">
								<span>{{ formatTime(job.startDate) }} 至 {{ formatTime(job.endDate) || "无限期" }}</span>
							</div>
							<div v-if="job.courseType === 'C'">
								<div class="item-icon-wrap flex-wrap flex-text-mid">
									<!-- <p class="fs-12 fc-999">时间：{{ item.startDate }}</p> -->
									<div class="progress-wrap">
										<div class="green-bar" :style="{ width: `${ job.completeRate }%` }"></div>
									</div>
									<div class="progress-number flex-item ">
										已学习 {{ job.completeRate + "%" }}
									</div>
								</div>
							</div>
						</div>
						<div class="stage-item-right" v-if="job.lockFlag == '2'">
								<button type="primary" round plain size="mini"
									 class="study-btn border-radius0"
									@click="goStudy(job)" >{{ calcBtnName(job) }}
								</button>
						</div>
					</div>
					<div class="border-line"></div>
				</div>
			</div>
		</scroll-view>
	</div>
</template>

<script>
	import {
		stringify,
		parse,
		getTime,
		dealExamTypeName,
		dateFormat
	} from "@/assets/js/util.js";
	import typeC from "@/static/image/stage-C.png"
	import typeE from "@/static/image/stage-E.png"
	import typeS from "@/static/image/stage-S.png"
	import typeP from "@/static/image/stage-P.png"
	import typeW from "@/static/image/stage-W.png"
	import typeSI from "@/static/image/stage-SI.png"
	import typePW from "@/static/image/stage-PW.png"
	import typeEX from "@/static/image/stage-EX.png"
	import VanIcon from "@/components/vant/van-icon/van-icon.vue";
	import VanActionSheet from "@/components/vant/van-action-sheet/van-action-sheet.vue";

	export default {
		components: {
			VanActionSheet,
			VanIcon
		},
		data() {
			return {
				isFromCode: "",
				listData: [],
				status: {
					P: {
						text: "通过",
						color: "#52C41A"
					},
					F: {
						text: "未通过",
						color: "#ECA049"
					},
					I: {
						text: "考试中",
						color: "#1890FF"
					},
					M: {
						text: "待阅卷",
						color: "#999"
					}
				},
				statusList: {
					"1": {
						text: "未开始",
						disabled: true,
						show: true,
						status: "info"
					},
					"2": {
						text: "已结束",
						disabled: true,
						show: true,
						status: "info"
					},
					"3": {
						text: "待签到",
						disabled: false,
						show: true,
						status: "info",
						desc: "未打卡"
					},
					"4": {
						text: "无权限",
						disabled: true,
						show: false,
						status: "info"
					},
					"5": {
						text: "正常签到",
						disabled: true,
						show: true,
						status: "primary",
						pre: "已"
					},
					"6": {
						text: "迟到签到",
						disabled: true,
						show: true,
						status: "danger",
						desc: "迟到",
						pre: "已"
					},
					"7": {
						text: "缺卡",
						disabled: true,
						show: true,
						status: "danger",
						desc: "未打卡"
					},
					"8": {
						text: "请假",
						disabled: false,
						show: false,
						status: "primary"
					},
					"9": {
						text: "未开启",
						disabled: true,
						show: false,
						status: ""
					}
				},
				dialogType: "",
				scoreType: "",
				isAllowLookBack: "",
				dialogVisible: false,
				signVisible: false,
				saveLoading: false,
				signType: "",
				activities: [{
						content: "2018-04-15 22:22:22",
						status: "primary",
						flag: true
					},
					{
						content: "2018-04-15 22:22:22",
						status: "danger",
						flag: false
					},
					{
						content: "2018-04-15 22:22:22",
						status: "info",
						flag: false
					}
				],
				dayText: "",
				timeText: "",
				detail: null,
				customerName: '', //当前环境
				activeIndex: 0,
				container: null,
				imgList: {
					C: typeC,
					E: typeE,
					S: typeS,
					P: typeP,
					W: typeW,
					SI: typeSI,
					SI_OFFLINE: typeSI,
					PW: typePW,
					EX: typeEX,
				},
				currentView: ''
			};
		},
		props: {
			list: {
				type: Array,
				default: []
			},
			planId: {
				type: String,
				default: ""
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			signTitle() {
				if (this.signType === 1) {
					return "签到";
				} else if (this.signType === 2) {
					return "签退";
				} else if (this.signType === 3) {
					return "请假后将无法签到，确认请假？";
				} else if (this.signType === 4 || this.signType === 5) {
					return "查看考勤";
				}
				return "";
			},
			formatTime() {
				return function(time) {
					return (time && time.substring(5)) || "";
				};
			},
			// 1 未开始 2 已结束 3 待签到 4 无权限 5 正常签到 6 迟到签到 , 7 缺卡 8 请假
			isShowViewDialog() {
				return function(
					arr = [5, 6, 7, 8],
					signInStatus = null,
					signOutStatus = null
				) {
					let i = signInStatus ? arr.findIndex(item => item == signInStatus) : -1,
						o = signOutStatus ? arr.findIndex(item => item == signOutStatus) : -1;
					return i >= 0 || o >= 0;
				};
			}
		},
		mounted() {
			this.container = this.$refs.container;
		},
		methods: {
			nodeClick() {},
			signInInfo(signInStatus, i, jobs) {
				let str = ''
				if (signInStatus === '5') {
					str = 'full'
				} else if (signInStatus === '6') {
					str = 'half'
				} else {
					str = 'empty'
				}
				// 最后一个不需要竖线
				if (i < jobs.length - 1 && jobs[i + 1].lockFlag === '2') {
					str += ' line'
				}
				return str
			},
			jobInfo(job, i, jobs) {
				let str = ''
				if (job.learnStatus === '1' || job.learnStatus === '3' || job.learnStatus == null) {
					str = 'empty'
				} else if (job.learnStatus === '2') {
					str = 'half'
				} else {
					str = 'full'
				}
				// 最后一个不需要竖线, 如果下一个是锁的 也不需要竖线
				if (i < jobs.length - 1 && jobs[i + 1].lockFlag === '2') {
					str += ' line'
				}
				return str
			},
			// 开始移动
			startMove(id) {
				this.activeIndex = id
				this.$nextTick(() => {
					this.currentView = `stage-${id}`
				});
			},
			changeBrief(item) {
				item.show = !item.show
				this.$forceUpdate()
			},
			getTime(s) {
				return getTime(s);
			},
			getNum(i = 0, t = 0) {
				i = t ? i : 0
				t = t || 1
				let num = i / t;
				return num ? Math.round(num * 10000) / 100 : "0.00";
			},
			getStatus(job, key) {
				let i = (job.objParam && job.objParam[key]) || "1";
				return this.statusList[i];
			},
			getSignStatus(i, key) {
				let ob = this.statusList[i] ? parse(stringify(this.statusList[i])) : {};
				if (i == 5 && key == "signIn") {
					ob.text = "已签到";
				} else if (i == 5 && key == "signOut") {
					ob.text = "已签退";
				}
				ob.text = ob.desc || ob.text;
				return ob;
			},
			goReview(type, id, queryId) {
				let routeData;
				if (type === "E") {
					routeData = {
						name: "test-review-id",
						params: {
							id: id
						},
						query: {
							examId: queryId
						}
					};
				} else {
					routeData = {
						name: "questionnaire-review-id",
						params: {
							id: id
						},
						query: {
							surveyId: queryId
						}
					};
				}
				this.$uniPush(routeData)
				// window.open(routeData.href, "_blank");
			},
			dealExamTypeName(type) {
				return dealExamTypeName(type);
			},
			setTime() {
				if (this.time) {
					clearTimeout(this.time);
				}
				let time = dateFormat("", "yyyy年MM月dd日 周w,HH:mm:ss").split(",");
				this.dayText = time[0];
				this.timeText = time[1];
				this.time = setTimeout(this.setTime, 1000);
			},
			getSignInfo() {
				this.$api.offlineTrain
					.userSignInfo({
						signId: this.currentId
					})
					.then(res => {
						this.detail = res;
					});
			},
			// type 1.代表封面点击
			goStudy(item, type) {
				let router = null;
					this.$uniPush({
						name: "course-detail-id",
						params: {
							id: item.courseId,
							source: 'T'
						},
					});			
			},
			openDialog(item) {
				this.dialogVisible = true;
				this.dialogType = item.courseType;
				if (item.courseType === "S") {
					this.$api.questionnaire
						.userBase({
							surveyId: item.courseId
						})
						.then(res => {
							this.isAllowLookBack = res.isAllowLookBack;
						});
					this.$api.questionnaire
						.userRecord({
							surveyId: item.courseId,
							pageNumber: 1,
							pageSize: 100
						})
						.then(res => {
							this.listData = res.list || [];
						});
				} else {
					this.$api.exam
						.infoStart({
							examId: item.courseId
						})
						.then(res => {
							this.scoreType = res.scoreType;
						});
					this.$api.exam
						.examReviewList({
							examId: item.courseId
						})
						.then(res => {
							this.listData = res;
						});
				}
			},
			dialogClose() {
				this.dialogVisible = false;
				this.scoreType = "";
				this.isAllowLookBack = "";
				this.listData = [];
			},

			signClose() {
				this.signVisible = false;
				this.signType = "";
				this.detail = null;
				this.currentId = "";
				if (this.time) {
					clearTimeout(this.time);
				}
			},
			handleSign() {
				if (this.signType === 1) {
					this.$api.offlineTrain
						.userSignSignin({
							signId: this.currentId
						})
						.then(res => {
							this.$toast.success("签到成功");
							this.signClose();
							this.$emit("update");
						});
				} else if (this.signType === 2) {
					this.$api.offlineTrain
						.userSignSignout({
							signId: this.currentId
						})
						.then(res => {
							this.$toast.success("签退成功");
							this.signClose();
							this.$emit("update");
						});
				} else if (this.signType === 3) {
					this.$api.offlineTrain
						.userSignLeval({
							signId: this.currentId
						})
						.then(res => {
							this.$toast.success("操作成功");
							this.signClose();
							this.$emit("update");
						});
				}
			},

			startJob(item) {
				let params = {
					planId: this.planId,
					courseId: item.courseId,
					courseType: item.courseType
				};
				this.$api.offlineTrain.startJob(params);
			},

			calcBtnDisable(job) {
				if (job.learnStatus === '1') {
					return true;
				} else if (job.learnStatus === '2') {
					return false;
				} else if (job.learnStatus === '5' && job.courseType === "S") {
					return false;
				} else {
					return false;
				}
			},

			// 首先判断job的开始 结束状态，优先级较高
			calcBtnName(job) {
				if (job.learnStatus === '1') {
					return "未开始";
				} else if (job.learnStatus === '2') {
					return "已过期";
				} else if (job.learnStatus === '3') {
					return job.courseType === "E" ?
						"开始考试" :
						job.courseType === "C" ?
						"开始学习" :
						job.courseType === "S" ?
						"开始答卷" :
						"去完成";
				} else if (job.learnStatus === '4') {
					return job.courseType === "E" ?
						"继续考试" :
						job.courseType === "C" ?
						"继续学习" :
						job.courseType === "S" ?
						"继续答卷" :
						"去完成";
				} else if (job.learnStatus === '5') {
					return job.courseType === "E" ? "已通过" : "已完成"
				}
			},
			calcExamBtnName(job) {
				switch (job.examStatus) {
					case "0":
						return {
							text: "未开始", disabled: true
						};
					case "1":
						if (job.alreadyExamNum) {
							return {
								text: "继续考试",
								disabled: false
							}
						} else {
							return {
								text: "开始考试",
								disabled: false
							}
						}
						// return { text: "开始考试", disabled: false };
					case "2":
						return {
							text: "继续考试", disabled: false
						};
					case "3":
						return {
							text: "已完成", disabled: false
						};
					case "4":
						return {
							text: "已过期", disabled: false
						};
					default:
						return {
							text: '', disabled: true
						}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.scroll-view {
		max-height: 100vh;
	}

	.view-stage-list {

		// 课时学习状态
		.lesson-status {
			position: relative;
			width: 14px;
			height: 14px;
			border: 1px solid #DDDDDD;
			border-radius: 50%;
			display: inline-block;
			vertical-align: -1px;

			&.full {
				&:before {
					content: '';
					position: absolute;
					width: 10px;
					height: 10px;
					border: 5px solid var(--color);
					border-radius: 50%;
					left: 1px;
					top: 1px;
				}
			}

			&.empty {}

			&.half {
				&:before {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					border: 5px solid var(--color);
					border-radius: 50%;
					left: 1px;
					top: 1px;
					border-left-color: transparent;
					border-top-color: transparent;
					transform: rotate(-45deg);
				}
			}

			&.line::after {
				position: absolute;
				content: ' ';
				left: 5px;
				top: 13px;
				height: 85px;
				width: 2px;
				background-color: #DDDDDD;
				z-index: 1;
			}
		}

		.list-tab {
			padding: 10px 15px 0;
			flex-wrap: wrap;
			justify-content: space-between;
			background-color: #fff;

			.tab-item {
				margin: 0 10px 10px 0;
				background: #F6F6F6;
				border-radius: 4px;
				padding: 10px;
				line-height: 12px;

				&:last-child {
					margin-right: auto;
				}

				span {
					font-size: 14px;
					color: #7F7F7F;
				}

				&.active {
					background: var(--colorbg);

					span {
						color: var(--color);
					}
				}
			}

		}

		.stage-title {
			padding: 16px 20px;
			background: #f6f6f6;
			font-size: 16px;
			font-weight: bold;

			.arrow {
				transform: rotate(90deg);
			}

			.arrow-top {
				transform: rotate(-90deg);
			}

			.brief {
				width: 100%;
			}

			.stage-title-desc {
				font-size: 12px;
				color: #7F7F7F;
				font-weight: 400;
				line-height: 17px;
				margin-top: 6px;
				padding-left: 63px;
				text-align: justify;
				text-align-last: left;
				letter-spacing: .8px;
			}
		}

		.stage-item {
			position: relative;
			padding: 20px 15px 20px 20px;
			//border-bottom: 1px solid #eeeeee;
			align-items: baseline;
			max-height: 106px;
			flex-wrap: wrap;

			&.higher {
				max-height: 120px;
			}

			.border-line {
				position: absolute;
				bottom: 0;
				width: 85%;
				height: 1px;
				right: 10px;
				background-color: #eee;
			}

			&.locked {
				color: #bbb;
			}


			.stage-item-left {
				width: 20px;
				text-align: left;
			}

			.stage-name {
				font-size: 16px;
				margin-bottom: 3px;
				width: 230px;
			}

			.stage-icon {
				width: 20px;
				height: 20px;
			}

			.stage-name-icon {
				display: inline-block;
				//width: 36px;
				padding: 1px 4px;
				//height: 18px;
				line-height: 18px;
				font-size: 12px;
				background: rgba(30, 166, 157, .1);
				border-radius: 2px;
				color: #1ea69d;
				text-align: center;
				vertical-align: 1px;

				&.yellow {
					background: #f5a623;
					color: #faf2e5;
				}
			}

			.icon-lock {
				width: 16px;
				height: 16px;
				background-size: 100% 100%;
				background-image: url('../../static/image/icon-plan-locked.png');
				display: inline-block;
				vertical-align: -1px;
			}

			.stage-time {
				margin: 5px 0;
				line-height: 13px;
			}

			.stage-item-right {
				position: relative;
				width: 20%;
				align-self: center;
				text-align: right;

				.stage-logo {
					position: relative;

					.stage-tip {
						position: absolute;
						left: 4px;
						top: 4px;
						border-radius: 24px 24px 2px 24px;
						font-size: 14px;

						span {
							-webkit-transform: scale(0.83);
							display: inline-block;
						}

						padding: 0 5px;
						height: 18px;
						line-height: 19px;
						background: linear-gradient(152deg, #40d2cc 0%, #1ea69d 100%);
						color: #fff;

						&.E {
							background: linear-gradient(323deg, #4a97fd 0%, #53cdfe 100%);
						}

						&.S {
							background: linear-gradient(146deg, #fece35 0%, #fe8505 100%);
						}
					}

					// img {
					//     width: 128px;
					//     height: 72px;
					// }
					.wrap-item-img {
						width: 128px;
						height: 72px;
						background: url('/static/image/course-img.png') no-repeat;
						background-size: cover !important;
					}
				}

				.stage-content {
					flex: 1;
					width: 100%;
					margin-left: 10px;
					position: relative;

					.wrap-name {
						height: 40px;
						font-size: 14px;
						line-height: 20px;
						margin-bottom: 22px;
						width: 240px;
					}

					:deep(.wrap-progress) {
						display: flex;
						align-items: center;

						.el-progress {
							width: 270px;
							// width: 330px;
							margin-right: 10px;
						}
					}
				}

				.study-btn {
					min-width: 70px;
					height: 26px;
					line-height: 24px;
					padding: 0 8px;
					margin: 2px 0;
					white-space: nowrap;

					&.btn-text {
						font-size: 12px;
						margin-left: 0;
					}
				}

				.stage-right {
					text-align: right;
					line-height: 0;
				}
			}
		}

		.sign-wrap {
			.sign-content {
				position: relative;
				z-index: 2;
				text-align: center;
				padding: 20px 0 0;

				.sign-title {
					font-size: 18px;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.85);
					line-height: 25px;
					padding: 20px 0 30px;
				}

				.sign-info {
					padding: 10px 40px 0;
				}

				.sign-time {
					padding: 30px 0 10px;

					.day-wrap {
						font-size: 14px;
						font-weight: 400;
						color: #666666;
						line-height: 20px;
					}

					.time-wrap {
						font-size: 42px;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.85);
						line-height: 59px;
					}
				}

				.van-step {
					text-align: left;
					padding-bottom: 40px;

					&:last-child {
						padding-bottom: 0;
					}

					:deep(.van-step__line) {
						width: 2px;
						border-left: 0;
					}

					&.primary-danger {
						:deep(.van-step__line) {
							background: linear-gradient(var(--color), #f56c6c);
						}
					}

					&.primary-info {
						:deep(.van-step__line) {
							background: linear-gradient(var(--color), #909399);
						}
					}

					&.primary-primary {
						:deep(.van-step__line) {
							background: var(--color);
						}
					}

					&.danger-primary {
						:deep(.van-step__line) {
							background: linear-gradient(#f56c6c, var(--color));
						}
					}

					&.danger-info {
						:deep(.van-step__line) {
							background: linear-gradient(#f56c6c, #909399);
						}

						:deep(.van-step__circle-container) {
							background: #f56c6c;
						}
					}

					&.danger-danger {
						:deep(.van-step__line) {
							background: #f56c6c;
						}
					}

					&.danger- {
						:deep(.van-step__line) {
							background: #f56c6c;
						}

						:deep(.van-step__circle-container) {
							background: #f56c6c;
						}
					}

					&.info-danger {
						:deep(.van-step__line) {
							background: linear-gradient(#909399, #f56c6c);
						}
					}

					&.info-primary {
						:deep(.van-step__line) {
							background: linear-gradient(#909399, var(--color));
						}
					}

					&.info-info {
						:deep(.van-step__line) {
							background: #909399;
						}
					}

					&[type='primary'] :deep(.van-step__circle-container) {
						background-color: #1ea69d;
					}

					&.danger-primary {
						:deep(.van-step__circle-container) {
							background: linear-gradient(#909399, #f56c6c);
						}
					}

					:deep(.van-step__circle-container) {
						left: -14px;
						width: 14px;
						height: 14px;
						background-color: #909399;
						border-radius: 50%;

						&:before {
							content: '';
							position: absolute;
							left: 2px;
							top: 2px;
							width: 10px;
							height: 10px;
							border-radius: 5px;
							background: #fff;
						}

						i {
							display: none;
						}
					}

					&.active :deep(.van-step__circle-container) {
						&:after {
							content: '';
							position: absolute;
							left: 4px;
							top: 4px;
							width: 6px;
							height: 6px;
							border-radius: 3px;
							background: inherit;
						}
					}
				}
			}

			.dialog-footer {
				// width: 150px;
				display: flex;
				margin: 0 auto;
				padding: 0 0 20px;
				justify-content: space-around;
				width: 100%;
			}

			.dialog-cancel-btn {
				background: #f8f8f8;
				padding: 8px 24px !important;
				line-height: 0 !important;
				height: 40px !important;
			}

			.dialog-confirm-btn {
				padding: 8px 24px !important;
				line-height: 0 !important;
				height: 40px !important;

				&.long {
					padding: 0 40px !important;
				}
			}
		}

		.item-icon-wrap {
			height: 30px;
			line-height: 15px;
			margin: 2px 0 8px;

			p {
				margin-top: 4px;
			}

			.progress-wrap {
				position: relative;
				width: 60px;
				height: 6px;
				background: #eeeeee;
				border-radius: 3px;
			}

			.green-bar {
				background: var(--color);
				left: 0;
				bottom: 0;
				position: absolute;
				height: 6px;
				border-radius: 3px;
			}

			.progress-number {
				color: #999999;
				font-size: 10px;
				bottom: 2px;
				width: 100%;
				text-align: left;
				padding: 0 5px;
			}
		}
	}

	:deep(.uni-popup .title) {
		font-size: 16px !important;
		padding-top: 5px !important;
	}
</style>